<style lang="less">
@import './cardList.less';
</style>
<template>
    <div class="search">
        <Card>
            <Tabs value="1">
                <TabPane label="文件/应用类" name="1">
                    <div class="card-wrapper" id="image">
                        <Card v-for="(item, i) in data" :key="i" class="card">
                            <div class="content">
                                <img @click="showPic(item, i)" v-if="item.type.indexOf('image') >= 0" class="img" :src="item.url" />
                                <div v-else-if="item.type.indexOf('video') >= 0" class="video" @click="showVideo(item)">
                                    <!-- 文件小于5MB显示video -->
                                    <video class="cover" v-if="item.size < 1024 * 1024 * 5">
                                        <source :src="item.url" />
                                    </video>
                                    <img class="play" src="@/assets/icon/play.png" />
                                </div>
                                <div v-else class="other">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="key">{{ item.fkey }}</div>
                                    <div class="info">文件类型：{{ item.type }} 文件大小：{{ ((item.size * 1.0) / (1024 * 1024)).toFixed(2) }} MB 创建时间：{{ item.createTime }}</div>
                                </div>
                                <div class="actions">
                                    <div class="btn">
                                        <Tooltip content="下载" placement="top">
                                            <Icon @click="download(item)" type="md-download" size="16" />
                                        </Tooltip>
                                    </div>
                                    <div class="btn">
                                        <Tooltip content="重命名" placement="top">
                                            <Icon @click="rename(item)" type="md-create" size="16" />
                                        </Tooltip>
                                    </div>
                                    <div class="btn">
                                        <Tooltip content="复制" placement="top">
                                            <Icon @click="copy(item)" type="md-copy" size="16" />
                                        </Tooltip>
                                    </div>
                                    <div class="btn-no">
                                        <Tooltip content="删除" placement="top">
                                            <Icon @click="remove(item)" type="md-trash" size="16" />
                                        </Tooltip>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                </TabPane>
                <TabPane label="项目类" name="2">
                    <div class="card-wrapper">
                        <Card @click="showProject(item)" v-for="(item, i) in data2" :key="i" class="card">
                            <div class="project">
                                <img class="img" :src="item.url" />
                                <div class="content">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="desc">{{ item.description }}</div>
                                    <div class="info">
                                        <div class="time">
                                            <Time :time="new Date()" :interval="1" />
                                        </div>
                                        <div class="avatar">
                                            <div v-for="(iitem, i) in item.author" :key="i" class="item">
                                                <Tooltip :content="iitem.name" placement="top">
                                                    <Avatar :src="iitem.avatar" size="small" class="c" />
                                                </Tooltip>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                </TabPane>
            </Tabs>
        </Card>

        <Modal v-model="videoVisible" :title="videoTitle" :width="800" @on-cancel="closeVideo" draggable>
            <div id="dplayer-card" style="height: 500px"></div>
            <div slot="footer">
                <span>文件类型：{{ file.type }} 文件大小：{{ file.msize }} 创建时间：{{ file.createTime }}</span>
            </div>
        </Modal>
    </div>
</template>

<script>
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
import DPlayer from 'dplayer';
export default {
    name: 'card-list',
    data() {
        return {
            dp: null,
            videoVisible: false,
            picTitle: '',
            videoTitle: '',
            file: {},
            data: [
                {
                    url: 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
                    name: 'XBoot',
                    type: 'image',
                    fkey: 'XBoot 是很不错的Web前后端分离架构开发平台',
                    size: 28659,
                    createTime: '2018-10-22'
                },
                {
                    url: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    name: 'Exrick',
                    type: 'image',
                    fkey: 'XBoot 是很不错的Web前后端分离架构开发平台',
                    size: 18659,
                    createTime: '2018-10-22'
                },
                {
                    url: 'https://cloud.video.taobao.com//play/u/95292294/p/1/e/6/t/1/210877258798.mp4',
                    name: '视频',
                    type: 'video',
                    fkey: 'XBoot 是很不错的Web前后端分离架构开发平台',
                    size: 8659,
                    createTime: '2018-10-22'
                },
                {
                    url: 'https://icarusion.gitee.io/iview/e1cf12c07bf6458992569e67927d767e.png',
                    name: 'XBoot',
                    type: 'txt',
                    fkey: 'XBoot 是很不错的Web前后端分离架构开发平台',
                    size: 8659,
                    createTime: '2018-10-22'
                }
            ],
            data2: [
                {
                    url: 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
                    title: 'XBoot',
                    description: 'XBoot 是很不错的Web前后端分离架构开发平台',
                    author: [
                        {
                            name: 'XBoot',
                            avatar: 'https://s1.ax1x.com/2018/05/19/CcdVQP.png'
                        },
                        {
                            name: 'Exrick',
                            avatar: 'https://i.loli.net/2021/01/16/VuODA1yUSCeXzFM.png'
                        }
                    ],
                    createTime: '2018-10-22'
                },
                {
                    url: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: 'Exrick',
                    description: 'XBoot 是很不错的Web前后端分离架构开发平台',
                    author: [
                        {
                            name: 'XBoot',
                            avatar: 'https://s1.ax1x.com/2018/05/19/CcdVQP.png'
                        },
                        {
                            name: 'Exrick',
                            avatar: 'https://i.loli.net/2021/01/16/VuODA1yUSCeXzFM.png'
                        }
                    ],
                    createTime: '2018-10-22'
                }
            ]
        };
    },
    methods: {
        init() {},
        showPic(v, i) {
            let viewer = new Viewer(document.getElementById('image'), {
                hidden: function () {
                    viewer.destroy();
                }
            });
            viewer.view(i);
        },
        showVideo(v) {
            this.dp = new DPlayer({
                container: document.getElementById('dplayer-card'),
                screenshot: true,
                video: {
                    url: v.url
                }
            });
            this.file = v;
            this.file.msize = ((v.size * 1.0) / (1024 * 1024)).toFixed(2) + ' MB';
            this.videoTitle = v.name + '(' + v.fkey + ')';
            this.videoVisible = true;
        },
        closeVideo() {
            this.dp.destroy();
        },
        download(v) {
            window.open(v.url + '?attname=&response-content-type=application/octet-stream');
        },
        copy(v) {
            this.$Message.info('点击了 ' + v.name + ' 的复制图标');
        },
        remove(v) {
            this.$Message.info('点击了 ' + v.name + ' 的删除图标');
        },
        rename(v) {
            this.$Message.info('点击了 ' + v.name + ' 的重命名图标');
        }
    },
    mounted() {
        this.init();
    }
};
</script>
